import React, { Component } from "react";
// import { connect } from 'dva';
import { Input, Form, Modal, Select, Radio, DatePicker } from "antd";
import moment from "moment";
import styles from "./PushModal.less";

const FormItem = Form.Item;
const { Option } = Select;
const { TextArea } = Input;
const RadioGroup = Radio.Group;
const { RangePicker } = DatePicker;

@Form.create()
class PushModal extends Component {
  state = {
    effDate:
      this.props.dataSource &&
      this.props.dataSource.effDate &&
      this.props.dataSource.effDate.substring(0, 10), // 自定义的开始时间
    expDate:
      this.props.dataSource &&
      this.props.dataSource.expDate &&
      this.props.dataSource.expDate.substring(0, 10), // 自定义的结束时间
    ruleType: this.props.dataSource && this.props.dataSource.ruleType // 推送类型的选择
  };

  // 提交
  handleOk = () => {
    // 校验表单
    this.props.form.validateFields((err, values = {}) => {
      // 表单校验规则不通过
      if (err) {
        return;
      }
      let temp = {};
      // 判断有效期是否是自定义
      if (values.effCycle === "diy") {
        temp = {
          effDate: this.state.effDate,
          expDate: this.state.expDate,
          effCycle: null
        };
      }
      // 判断有效期是否是无限
      if (values.effCycle === undefined) {
        temp = {
          effDate: null,
          expDate: null,
          effCycle: null
        };
      }
      if (this.props.dataSource && this.props.dataSource.ruleId) {
        // 编辑-提交
        const { creator, ruleId } = this.props.dataSource;
        const params = {
          ...values,
          ...temp,
          creator,
          ruleId
        };
        this.props.dispatch({
          type: "pushRules/pushRuleConfMod",
          payload: params
        });
      } else {
        // 添加-提交 创建者暂定为空
        const params = {
          ...values,
          ...temp,
          triggerTime: "1",
          creator: null,
          status: "1"
        };
        this.props.dispatch({
          type: "pushRules/pushRuleConfAdd",
          payload: params
        });
      }
    });
  };

  // 日期选择器Change事件
  onRangePickerChange = values => {
    this.setState({
      effDate: values[0] ? values[0].format("YYYY-MM-DD") : null,
      expDate: values[1] ? values[1].format("YYYY-MM-DD") : null
    });
  };

  render() {
    const { getFieldDecorator, setFieldsValue } = this.props.form;
    const { dataSource = {}, showModal, closeModal } = this.props;
    const {
      ruleName,
      ruleType,
      ruleDesc,
      effDate,
      ruleId,
      expDate
    } = dataSource;
    const optionData = [
      { title: "精准推送", val: "精准推送" },
      { title: "普通推送", val: "普通推送" }
    ];
    return (
      <Modal
        title={ruleId ? "编辑规则" : "新增规则"}
        visible={showModal}
        onCancel={closeModal}
        onOk={this.handleOk}
        destroyOnClose={true}
        okText={"确定"}
        cancelText={"取消"}
        zIndex={999}
        style={{ top: 20 }}
        width={600}
      >
        <Form layout="inline" className={styles.root}>
          <FormItem label={"规则名称"} className={styles.selectTitle}>
            {getFieldDecorator("ruleName", {
              rules: [
                {
                  required: true,
                  message: "请输入规则名称!"
                },
                {
                  pattern: /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/,
                  message: "规则名称含非法字符!"
                }
              ],
              initialValue: ruleName
            })(<Input placeholder="请输入" style={{ width: 425 }} />)}
          </FormItem>
          <FormItem label={"规则类型"} className={styles.selectTitle}>
            {getFieldDecorator("ruleType", {
              rules: [
                {
                  required: true,
                  message: "请选择规则类型!"
                }
              ],
              initialValue: ruleType
            })(
              // TODO：提示文字失效
              <Select
                onChange={e => {
                  this.setState({ ruleType: e });
                }}
                placeholder="请选择"
                style={{ width: 240 }}
              >
                {optionData.map((item, index) => (
                  <Option key={index} value={item.val}>
                    {item.title}
                  </Option>
                ))}
              </Select>
            )}
          </FormItem>
          <FormItem label={"规则描述"} className={styles.selectTitle}>
            {getFieldDecorator("ruleDesc", {
              rules: [
                {
                  required: true,
                  message: "请输入规则描述!"
                }
              ],
              initialValue: ruleDesc
            })(
              <TextArea
                placeholder="不超过300个字符"
                rows={4}
                cols={120}
                maxLength={300}
                style={{ width: 425 }}
              />
            )}
          </FormItem>
          {this.state.ruleType === "精准推送" && (
            <FormItem label={"推送用户"} className={styles.selectTitle}>
              {/* TODO：推送用户暂时是下一个版本的功能  */}
              <Select mode="multiple" style={{ width: 425 }}>
                <Option key={1} value={"用户1"}>
                  用户1
                </Option>
                <Option key={2} value={"用户2"}>
                  用户2
                </Option>
                <Option key={3} value={"用户3"}>
                  用户3
                </Option>
              </Select>
            </FormItem>
          )}
          <FormItem label={"规则有效期"} className={styles.selectTitle}>
            {getFieldDecorator("effCycle", {
              initialValue: effDate ? "diy" : undefined
            })(
              <RadioGroup style={{ width: 440 }}>
                <Radio value={undefined}>不限</Radio>
                <Radio value="year">1年有效</Radio>
                <Radio value="month">1月有效</Radio>
                <Radio value="week">1周有效</Radio>
                <Radio value="day">当天有效</Radio>
                <Radio value="diy">
                  自定义
                  {
                    <RangePicker
                      defaultValue={
                        effDate ? [moment(effDate), moment(expDate)] : []
                      }
                      style={{ marginLeft: 15, width: 200 }}
                      className={styles.pocker}
                      format="YYYY-MM-DD"
                      onChange={value => {
                        this.onRangePickerChange(value);
                        setFieldsValue({ effCycle: "diy" });
                      }}
                    />
                  }
                </Radio>
              </RadioGroup>
            )}
          </FormItem>
        </Form>
      </Modal>
    );
  }
}

export default PushModal;
